<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>文件列表</title>
    <style>
        @font-face {
            font-family: 'Dancing Script';
            src: url("/lib/Dancing Script.ttf");
        }

        .body {
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
            'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
            line-height: 1.7;
            background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
            background-blend-mode: screen, overlay, hard-light, color-burn, color-dodge, normal;
            background-attachment: fixed;
            background-repeat: no-repeat;
            background-position: 0 100%;
            color: #ffffff;
        }

        header {
            text-align: center;
        }

        header .overlay {
            width: 100%;
            margin: 0 auto;
            height: 100%;
            padding: 8px;
            color: #FFF;
        }

        h1 {
            font-family: 'Dancing Script', cursive;
            font-size: 60px;
            margin-bottom: 15px;
        }

        h3 {
            font-family: 'Open Sans', sans-serif;
            margin-bottom: 30px;
            display: block;
            font-size: 1em;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0;
            margin-inline-end: 0;
            font-weight: bold;
        }

        .btn-group {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 18px;
        }

        .text-send-btn {
            margin: 18px;
        }

        .file-send-btn {
            margin: 18px;
        }

        .text-medium {
            font-size: 16px;
        }

        .content {
            width: 100%;
            margin: 0 auto;
            text-align: center;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            padding-top: 18px;
        }

        .item {
            width: 180px;
            border-radius: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
            padding: 16px 18px;
            background-color: rgba(255, 255, 255, 0.8);
            margin: 16px;
            color: #000000;
        }

        .item:hover {
            cursor: pointer;
            background-color: #f5f5f5;
        }

        .filename {
            text-overflow: ellipsis;
            word-break: break-all;
            overflow: hidden;
            white-space: nowrap;
            height: 3rem;
        }

        .icon {

        }

        .btn-primary {
            color: #FFFFFF;
            background-color: #fbc2eb;
            border-color: #fbc2eb;
        }

        .btn-primary:hover {
            background-color: #F8D6EEFF;
        }

        .btn-cancel {
            color: #FFFFFF;
            background-color: #a6c1ee;
            border-color: #a6c1ee;
        }

        .btn-cancel:hover {
            background-color: #bbcfee;
        }

        .btn {
            display: inline-block;
            border-radius: 20px;
            padding: 12px 23px;
            line-height: 1;
            min-height: 40px;
            white-space: nowrap;
            cursor: pointer;
            text-align: center;
            box-sizing: border-box;
            font-weight: 500;
            font-size: 14px;
            outline: none;
            margin: 0;
            transition: .1s;
            transition-property: all;
            transition-duration: 0.1s;
            transition-timing-function: ease;
            transition-delay: 0s;
        }

        .btn:hover {
            cursor: pointer;
        }

        .icon-btn {
            padding: 20px;
            margin: 0 30px;
        }

        .icon-btn:hover {
            cursor: pointer;
        }

        /** ------- pc端 --------- **/
        @media only screen and (min-width: 500px) {
            .file-form {
                width: 475px;
                height: 119px;
                max-height: 80px;
                max-width: 475px;
                min-width: 475px;
                margin-bottom: 18px;
                border-color: #eee;
            }

            .message {
                width: 475px;
                height: 119px;
                max-height: 80px;
                max-width: 475px;
                min-width: 475px;
                margin-bottom: 18px;
                border-color: #eee;
            }

            /** dialog **/
            .mask {
                display: none;
                position: fixed;
                width: 100%;
                height: 100%;
                z-index: 2;
                background: rgba(0, 0, 0, 0.1);
                top: 0;
                left: 0;
            }

            .dialog {
                display: none;
                position: fixed;
                z-index: 3;
                width: 500px;
                min-height: 220px;
                max-height: 220px;
                top: 50%;
                left: 50%;
                margin: -150px 0 0 -250px;
                background: #fff;
                padding: 15px;
                border-radius: 5px;
            }

            .dialog-header {
                border-bottom: 1px solid #eee;
                padding: 10px;
            }

            .dialog-body {
                padding: 10px;
                min-height: 50px;
            }
        }


        /** ------- 移动端 ---------- **/
        @media only screen and (max-width: 500px) {
            .file-form {
                height: 6rem;
                max-height: 6rem;
                width: 100%;
                margin-bottom: 1rem;
                border-color: #eee;
            }

            .message {
                height: 6rem;
                max-height: 6rem;
                width: 100%;
                margin-bottom: 18px;
                border-color: #eee;
            }

            /** dialog **/
            .mask {
                display: none;
                position: fixed;
                width: 100%;
                height: 100%;
                z-index: 2;
                background: rgba(0, 0, 0, 0.1);
                top: 0;
                left: 0;
            }

            .dialog {
                display: none;
                position: fixed;
                z-index: 3;
                width: 18rem;
                height: fit-content;
                margin: 0 auto;
                left: 0;
                right: 0;
                top: 20%;
                bottom: 0;
                background: #fff;
                padding: 1rem;
                border-radius: 1rem;
            }

            .dialog-header {
                border-bottom: 1px solid #eee;
                padding: 10px;
            }

            .dialog-body {
                padding: 10px;
                min-height: 50px;
            }
        }

        .alter {
            display: none;
            position:fixed;
            margin:auto;
            left:0;
            right:0;
            top:0;
            bottom:0;
            width: 200px;
            height: min-content;
            padding: 1rem 1rem;
            border: 1px solid transparent;
            border-radius: .25rem;
            text-align: center;
        }

        .alert-success {
            background-color: #f0f9eb;
            color: #67c23a;
            opacity: 0.8;
        }

    </style>
</head>
<body class="body">
<header>
    <div class="overlay">
        <h1>File Share</h1>
        <h3>跨平台、高速的文件传输工具</h3>
    </div>
</header>
<div id="alter-success" class="alter alert-success">

</div>

<div class="btn-group">

    <!-- 发送文本 -->
    <span id="text-send-btn" title="分享一段文本" class="icon-btn">
        <svg t="1634659742968" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="2537" width="50" height="50"><path
                d="M960 736a96 96 0 0 1-96 96h-704A96 96 0 0 1 64 736V288.512v-1.216A96 96 0 0 1 160 192h704A96 96 0 0 1 960 287.36v448.64z m-64-390.72l-367.232 225.92a32 32 0 0 1-33.536 0L128 345.344V736a32 32 0 0 0 32 32h704a32 32 0 0 0 32-32V345.28zM864 256h-704a32 32 0 0 0-28.032 16.576L512 506.432l380.032-233.856A32 32 0 0 0 864 256z"
                p-id="2538" fill="#ffffff"></path></svg>
    </span>

    <!-- 发送文本 -->
    <span id="file-send-btn" title="分享一份文件" class="icon-btn">
        <svg t="1634659866866" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="6850" width="50" height="50"><path
                d="M880 298.4H521L403.7 186.2c-1.5-1.4-3.5-2.2-5.5-2.2H144c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V330.4c0-17.7-14.3-32-32-32zM840 768H184V256h188.5l119.6 114.4H840V768z"
                p-id="6851" fill="#ffffff"></path></svg>
    </span>
</div>

<div class="mask" id="mask"></div>
<!-- TODO ajax 上传文本 -->
<div class="dialog" id="text-send-dialog">
    <div class="dialog-header">
        <span style="color: black">分享一段文本</span>
    </div>
    <div class="dialog-body">
        <form id="submit-text" action="/addText" method="post">
            <div>
                <textarea class="message" id="message" name="message" rows="3"></textarea>
            </div>
            <div>
                <span class="btn btn-primary dialog-close" style="float: left">取消</span>
                <span class="btn btn-primary submit-btn" style="float: right">提交</span>
            </div>
        </form>
    </div>
</div>

<div class="dialog" id="file-send-dialog" style="color: black">
    <div class="dialog-header">
        <span> 分享一个文件 </span>
    </div>
    <div class="dialog-body" style="margin-top: 18px">
        <form id="submit-file" action="/addFile" method="post" enctype="multipart/form-data">
            <div class="file-form">
                <input type="file" name="file"/>
            </div>
            <div>
                <span class="btn btn-primary dialog-close" style="float: left">取消</span>
                <span class="btn btn-primary submit-btn" style="float: right">提交</span>
            </div>
        </form>
    </div>
</div>

<div id="app" class="content">
</div>
<script src="lib/template-web.js"></script>
<script src="lib/jquery.js"></script>
<script id="tpl-files" type="text/html">
    {{each files}}
    {{if $value.type === 'text'}}
    <div class="item item-text" data="{{$value.content}}">
        <div class="text-medium filename" title="{{$value.name}}">{{$value.name}}</div>
        <div>
            <svg t="1634575437431" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="2388" width="50" height="50">
                <path d="M746.932 698.108" p-id="2389"></path>
                <path d="M925.731 288.698c-1.261-1.18-3.607-3.272-6.902-6.343-5.486-5.112-11.615-10.758-18.236-16.891-18.921-17.526-38.003-35.028-56.046-51.397-2.038-1.848-2.038-1.835-4.077-3.682-24.075-21.795-44.156-39.556-58.996-52.076-8.682-7.325-15.517-12.807-20.539-16.426-3.333-2.402-6.043-4.13-8.715-5.396-3.365-1.595-6.48-2.566-10.905-2.483C729.478 134.227 720 143.77 720 155.734l0 42.475 0 42.475 0 84.95L720 347l21.205 0L890 347l0 595L358.689 942C323.429 942 295 913.132 295 877.922L295 177l361.205 0c11.736 0 21.25-9.771 21.25-21.5s-9.514-21.5-21.25-21.5l-382.5 0L252 134l0 21.734L252 813l-52.421 0C166.646 813 140 786.928 140 754.678L140 72l566.286 0C739.29 72 766 98.154 766 130.404L766 134l40 0 0-3.596C806 76.596 761.271 33 706.286 33L119.958 33 100 33l0 19.506 0 702.172C100 808.463 144.642 852 199.579 852L252 852l0 25.922C252 936.612 299.979 984 358.689 984l552.515 0L932 984l0-21.237L932 325.635 932 304l0.433 0C932.432 299 930.196 292.878 925.731 288.698zM762 304l0-63.315L762 198.21l0-0.273c14 11.479 30.3 26.369 49.711 43.942 2.022 1.832 2.136 1.832 4.157 3.665 17.923 16.259 36.957 33.492 55.779 50.926 2.878 2.666 5.713 5.531 8.391 7.531L762 304.001z"
                      p-id="2390"></path>
                <path d="M816.936 436 407.295 436c-10.996 0-19.91 8.727-19.91 19.5 0 10.77 8.914 19.5 19.91 19.5l409.641 0c11 0 19.914-8.73 19.914-19.5C836.85 444.727 827.936 436 816.936 436z"
                      p-id="2391"></path>
                <path d="M816.936 553 407.295 553c-10.996 0-19.91 8.727-19.91 19.5 0 10.774 8.914 19.5 19.91 19.5l409.641 0c11 0 19.914-8.726 19.914-19.5C836.85 561.727 827.936 553 816.936 553z"
                      p-id="2392"></path>
                <path d="M816.936 689 407.295 689c-10.996 0-19.91 8.729-19.91 19.503 0 10.769 8.914 19.497 19.91 19.497l409.641 0c11 0 19.914-8.729 19.914-19.497C836.85 697.729 827.936 689 816.936 689z"
                      p-id="2393"></path>
            </svg>
        </div>
    </div>
    {{/if}}
    {{if $value.type === 'file'}}
    <div class="item" onclick="javascript:window.location.href='/download/{{$value.name}}'">
        <div class="text-medium filename" title="{{$value.name}}">{{$value.name}}</div>
        <div>
            <svg t="1628213180275" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="2103" width="50" height="50">
                <path d="M512 450.016c15.68 0 28.544 11.776 30.304 26.944l0.224 3.552-0.032 292.352 80.384-80.416 2.88-2.528c12.064-9.216 30.016-7.744 41.792 4.032 11.744 11.776 13.216 29.696 4 41.76l-2.528 2.88-107.904 107.904c-22.56 22.592-59.648 22.592-85.152 0.832l-4.16-3.808-115.36-115.36-2.72-3.072c-10.048-12.704-9.76-30.592 1.248-41.6 10.976-10.976 28.864-11.264 41.6-1.216l3.04 2.72 81.856 81.888v-286.368c0-16.832 13.664-30.496 30.528-30.496zM512 128c131.2 0 239.392 99.36 254.272 227.392C875.648 370.304 960 464.64 960 578.816c0 124.48-100.288 225.376-224 225.376l-3.744-0.192a32.128 32.128 0 0 1-28.256-32c0-16.512 12.352-30.112 28.256-32L736 739.84c88.352 0 160-72.096 160-160.992 0-80.832-59.552-148.864-138.336-159.584l-49.216-6.72-5.76-49.632C691.52 266.176 609.632 192.416 512 192.416c-97.664 0-179.456 73.76-190.656 170.464l-5.76 49.696-49.28 6.688C187.616 429.952 128 497.984 128 578.816 128 665.376 195.904 736 281.056 739.648L288 739.84c17.664 0 32 14.4 32 32.192 0 16.512-12.352 30.144-28.256 32L288 804.16c-123.712 0-224-100.896-224-225.376 0-114.176 84.352-208.512 193.76-223.36C272.64 227.328 380.8 128 512 128z"
                      fill="#000000" p-id="2104"></path>
            </svg>
        </div>
    </div>
    {{/if}}
    {{/each}}
    {{if files.length == 0}}
    <div class="">暂无分享文件，请"添加文件"到"分享列表"</div>
    {{/if}}
</script>
<script>
    $(document).ready(function () {
        $('.submit-btn').on('click', function () {
            let form = $(this).closest('form')
            form.submit();
        });

        $(document).on('click', '.item-text', function (e) {
            let content = $(this).attr("data");
            let copy = (e) => {
                e.preventDefault()
                e.clipboardData.setData('text/plain', content)
                document.removeEventListener('copy', copy)
                $('#alter-success').html('复制成功').fadeIn(500).fadeOut(1000)
            }
            document.addEventListener('copy', copy)
            document.execCommand("Copy");
            e.preventDefault()
        });

        function sendGet(url, callback) {
            const xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    callback(JSON.parse(xhr.responseText))
                }
            };
            //发送异步请求
            xhr.open("GET", url, true);
            //发送请求
            xhr.send();
        }

        function updatePage() {
            sendGet("/files", (data) => {
                document.getElementById("app").innerHTML = template('tpl-files', data)
            })
        }

        updatePage();
        // 每隔6秒更新页面
        setInterval(updatePage, 6000);

        // dialog
        function initDialog(id, openBtnId) {
            let openDialogBtn = document.getElementById(openBtnId)
            let mask = document.getElementById('mask')
            let dialogBox = document.getElementById(id)
            let dialogClose = dialogBox.getElementsByClassName('dialog-close')[0];

            openDialogBtn.addEventListener('click', function () {
                //显示遮罩层
                mask.style.display = 'block';
                //显示弹出窗口
                dialogBox.style.display = 'block';
            });
            dialogClose.addEventListener('click', function () {
                //隐藏遮罩层
                mask.style.display = 'none';
                //显示弹出窗口
                dialogBox.style.display = 'none';
            });
            mask.addEventListener('click', function () {
                //隐藏遮罩层
                mask.style.display = 'none';
                //显示弹出窗口
                dialogBox.style.display = 'none';
            });
        }

        initDialog('text-send-dialog', 'text-send-btn')
        initDialog('file-send-dialog', 'file-send-btn')
    });
</script>
</body>
</html>
